<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="">
<style>
	div.mermaid {
		font-family: 'Courier New', Courier, monospace !important;
	}
</style>
</head>

<body>

<!-- accDescription Tasks for Q4 -->
<div class="mermaid">
gantt
  title A Gantt Diagram
  accDescription Remaining Q4 Tasks
  dateFormat  YYYY-MM-DD
  section Section
  A task           :a1, 2014-01-01, 30d
  Another task     :after a1  , 20d
  section Another
  Task in sec      :2014-01-12  , 12d
  another task      : 24d
</div>

<script src="./mermaid.js"></script>
<script>
	mermaid.initialize({
  logLevel: 3,
  securityLevel: 'loose',
  gantt: { axisFormat: '%m/%d/%Y' },
	});
</script>

</body>

</html>
